<!--
转换（transform）
    转换是CSS3中最具颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
        移动/偏移    translate
        旋转         rotate
        缩放         scale
    转换，也可以称为变形，分为2D、3D。

目前学过的，可以移动盒子的位置的知识点
    1、定位
    2、盒子外边距
    3、现在学的：转换之移动

补充：2D倾斜
  skew(xdeg,ydeg)
  skewX(xdeg)
  skewY(ydeg)

2D转换
    2D转换是改变标签在二维平面上位置和形状的一种技术；
    二维坐标系
        原点    左上角
        x轴     水平向右
        y轴     垂直向下
    2D转换的三种功能（自己查阅资料，还有很多功能）
        2D移动  translate
        2D旋转  rotate
        2D缩放  scale
    2D转换的复合写法（简写）
      transform: 位移 旋转 缩放 ...;
      transform: translate() rotate() scale() ...;
          - 多种转换效果同时存在
          - 建议：位移放在第一个，因为不同顺序得到不同效果

2D转换之：2D移动
    - 类似定位，可以改变元素在页面中的位置
        transform: translate(x, y);    // 同时写时，必须设置两个，若另一个不移动就设置为0
        transform: translateX(x);      // 分开写时，x、y同一时间只能存在一个 
        transform: translateY(y);
    - 不会影响其它盒子（类似相对定位）
    - 百分比：相对于自身元素
    - 对行内元素没有效果
    - 应用场景：
        1）光标移动到盒子上，盒子悬浮起来
        2）水平居中、垂直居中，即移动自身盒子的一半：translate(-50%,-50%)
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  div {
    width: 200px;
    height: 200px;
  }
  .one {
    background-color: cyan;
    transform: translate(100px, 25%);
  }
  .two {
    background-color: purple;
  }
</style>

<div class="one">one</div>
<div class="two">two</div>
